<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TestEdge</title>
<!--link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/style_testEdge.css" />

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/common.js"></script-->
	
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.jscrollpane.css" />
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge.css" />
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge_custom.css" />

<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-ui.js"></script>	
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/common.js"></script>	
	
<!--Table Sortable -->
<!--script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.tablesorter.min.js"></script-->
<!--custome scroll -->
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.mousewheel.js"></script>


<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout-2.2.1.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout.mapping-latest.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/underscore-min.js"></script>




<script type="text/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_teacherutilization_services.js"></script>
<script type="text/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_teacherutilization_main.js"></script>
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.loader.js"></script>
<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.loader.css"/>

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style_IE.css" />
<script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery.placeholder.min.js"></script>
<script>
	$(function() {
	$('input, textarea').placeholder();
	});
</script>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/style_IE_8.css" />
<![endif]-->


<script>
    jQuery(document).ready(function(e) {     
        console.log("Ready called");     
          var settings = {autoReinitialise: true};
        	var pane = $('.scroll-paneTeachingStaff')
        	pane.jScrollPane(settings);        
               
        bodyOnLoad();
    });
    
</script>
</head>
<body>
<!--BO Main Content -->
<div class="contentWrapper">
  <div class="wrapper">
    <div class="testEdgeMainContent"> 
    	<h1 class="titleMain" style="margin-bottom: -24px"><span class="floatleft">Teacher Utilization: <i id="academicYearInfo">Academic Year Name</i></span><a href="#."  onclick="showHelp(event)"  style="margin-top: 10px; margin-right: 13px"  class="iconHelp seletc floatright"></a></h1>
         <div  class="help"></div>
          <a class="floatright" href="#" style="margin-right: 10px" onclick="retrunToAcademicYear(event)"> &lt; Back to Academic Year</a>   
        <div class="titleSection">
    	
              <div class="floatleft width360 marginTop">
                	
                	<table><tr>
                	    <td><label class="displayBlock bold marginBottom5">Filters:&nbsp;&nbsp;&nbsp;&nbsp;</label></td><td><input type="text" class="width256 floatleft spacing" placeholder="filter text here.." data-bind="value: nameSearch, valueUpdate: 'afterkeydown'" /></td></tr></table>
                	
                	
                	
                	
                	
                </div>
            <div class="clearBoth"></div>
        </div>
        
        <!--BO Added Facilities -->
        <div class="containerWhiteAddFaci border-bottom" id="teachingStaff">
        	<div class="scroll-pane6">
            <table id="t" cellspacing="0" cellpadding="0" class="tablesorter"  data-bind="triggerUpdate: staffArr">
			<thead>
                <tr class="border-bottom">
                	<th ></th>
                    <th >Teachers</th>
                    <th >Subjects</th>
                    <th >Class Teacher</th>
                    <th >Contact</th>
                    <th >Periods per week</th>
                    <th ></th>
                </tr>
            </thead>
            <tbody>
                  <!-- ko foreach: filteredRecords -->
                <tr >
                    <td data-bind="text:$index()+1" width="10">Error</td>
                    <td  width="140"><span data-bind="text:title"> <a href="#">Error</a></span> <span data-bind="text:name">     </td>
                    <td data-bind="text:subjectsStr" width="160">Error</td>
                    <td  width="80"></span> <!-- ko if: isClassTeacher() --><span style="color: orange" data-bind="text:classTitle">  </span><!--/ko--></td>
                    <td data-bind="text:contactNumber" width="80">Error</td>
                    <td data-bind="text:allocationStr" width="90">Error</td>
                    <td width="40"><a href="#." class="teacherDtl" data-bind="click:openDetailsDialog">Details</a></td>
                </tr>
                 <!-- /ko -->     
              </tbody>
	   </table>
      </div>
       </div>

       <!--EO Add Facilities -->
       
    </div>
  </div>
</div>
<!--EO Main Content -->

<!--BO Popup Content -->
<div id="teachersDetails" title="Teacher's Details" style="height: 500px !important;">
	<div class="scroll-paneTeachingStaff" style="height: 450px !important;">
	<div class="sectionContainer" data-bind="with:currentContent" >
	    
	    
	  
    	<h2 class="title2"  ><span data-bind="text:title"></span> <span data-bind="text:name">Mrs. Dipti Aradkar</span></h2>
        <span class="displayBlock marginBottom5" data-bind="text:contactNumber">Contact Number: 9655402221</span>
        <span class="displayBlock marginBottom30" data-bind="text:emailAddress">Email: d.aradkar@wkschool.edu</span>
        
        <h3 class="marginBottom5">Teaching Details</h3>
       <table id="t" cellspacing="0" cellpadding="0" class="schoolEventstable">
			<thead>
                <tr class="border-bottom">
                    <th width="25%">Section</th>
                    <th><table><thead><tr><th width="25%">Subjects</th><th width="25%">Classes</th><th width="25%">Periods per week</th></tr></table><thead></th>
                </tr>
            </thead>
            <tbody>               
            	<!-- ko foreach: section -->
            	    <tr>
                	<td  data-bind="text:sectionTitle" style="vertical-align:middle" width="25%">Primary</td>
                    <td width="75%"> 
                        <!-- ko foreach: subject -->
                        <table width="100%">
                            <tr>
                                <td data-bind="text:subjectTitle" width="33%"></td>
                                <td width="33%"><!-- ko foreach: classDetail --><span data-bind="text:classTitle"></span> <!-- /ko -->  </td>
                                <td width="34%"><span data-bind="text:allocation"></span> periods</td>
                                
                            </tr>
                        </table>
                     <!-- /ko -->                            
                    </td>
                    </tr> 
                <!-- /ko --> 
            </tbody>
       </table>
    </div>
	
	</div>
	
	<div class="bottomButton">
        <a href="#" class="te-button buttonBlue floatleft" id="saveInfo">Close</a>
        
        <div class="clearBoth"></div> 
	</div>
</div>
<!--EO Popup Content -->

</body>
</html>
